<template>
	<view style="position: relative;padding: 0 15px;">
		<image src="/static/tabbar-bg.png"
			style="position: absolute;left: -2px;bottom: 15px;right: 0;height: 70px;width: 100%;" mode="aspectFill">
		</image>
		<view style="display: flex;align-items: flex-end;justify-content: space-around;padding-bottom: 12px;">
			<view class="item" v-for="(item, index) in tabbarList" :key="index" @click="selectHandle(item.path,index)">
				<image class="tab-item" :src="item.iconPath" v-if="newIndex == index">
				</image>
				<image class="tab-item" :src="item.icon" v-else>
				</image>
				<text :class="[newIndex == index?'label current':'label']">
					{{item.text}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Tabbar",
		data() {
			return {
				tabbarList: [{						text: '关于平台', //关于平台						icon: '/static/tabbar/tabbar-home.png', //未选中图标						iconPath: '/static/tabbar/tabbar-home-s.png', //选中图片
						path: "/pages/home/home", //页面路径					},					{						text: '下单列表', //下单列表						icon: '/static/tabbar/tabbar-order.png',						iconPath: '/static/tabbar/tabbar-order-s.png',
						path: "/pages/order/order",					},					{						text: '下单', //下单						icon: '/static/tabbar/tabbar_add.png',						iconPath: '/static/tabbar/tabbar_add.png',
						path: "/pages/publish/publish",					},					{						text: '接单大厅', //接单大厅						icon: '/static/tabbar/tabbar-shop.png',						iconPath: '/static/tabbar/tabbar-shop-s.png',
						path: '/pages/shop/shop',					},					{						text: '我的信息', //我的信息						icon: '/static/tabbar/tabbar-mine.png',						iconPath: '/static/tabbar/tabbar-mine-s.png',
						path: "/pages/mine/mine",					}				],
				newIndex: 0
			};
		},
		mounted() {
			uni.hideTabBar({
				animation: false
			})
			let index = uni.getStorageSync('tabCurrentIndex')
			this.newIndex = index || 0
		},
		methods: {
			selectHandle(path,index) {
				uni.setStorageSync('tabCurrentIndex',index)
				if(path.includes('/pages/home/home')||path.includes('/pages/order/order')||path.includes('/pages/shop/shop')||path.includes('/pages/mine/mine')) {
					uni.switchTab({
						url: path
					})
				} else {
					uni.navigateTo({
						url: path
					})
				}
			}
		}
	}
</script>

<style scoped>
	.item {
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		
	}

	.item .label {
		font-size: 10px;
		color: #707070;
		margin-top: 5px;
	}
	.item .label.current{
		color: #2064E1;
	}
	.tab-item{
		width:30px;
		height: 30px;
	}
	.item-img{
		width: 23px;
		height: 23px;
	}
	.item-img1{
		width: 40px;
		height: 40px;
	}
</style>